<template>
    <div class="confirm">
        <div class="top">
            <div class="topbar">
                <span class="iconfont icon-fanhui back" @click="handleBack"></span>
                <div class="toptitle">确认订单</div>
            </div>
            <div class="addressBox">
                <div class="address">
                    <div class="a1">收货地址</div>
                    <div class="a2">上海电机学院水华路300号</div>
                    <div class="a3">
                        <span>雷迪什（先生）</span>
                        <span>18912312312</span>
                    </div>
                </div>
                <div class="dayu">
                    <span class="iconfont icon-dayu"></span>
                </div>
            </div>
        </div>
        <div class="cartList">
            <div class="shopName">{{shopName}}</div>
            <div class="cartfa">
            <div class="cart_itemfa">
            <template  v-for="item in cartList" :key="item.id">

            <div v-if="item.count>0" class="cart_item" >
                <div class="leftbar">
                    <div class="imgbox">
                        <img src="http://www.dell-lee.com/imgs/vue3/near.png" alt="">
                    </div>
                </div>
                <div class="rightbar">
                    <div class="title">{{item.title}}</div>
                    <div class="bottom">
                        <div class="b_left">&yen;{{item.price}} x {{item.count}}</div>
                        <div class="b_right">&yen;{{item.price*100*item.count/100}}</div>
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>
            <!-- <div class="total">
                <span class="tt">共计{{Object.keys(cartList).length}}件/1.4kg</span>
                <span class="iconfont icon-jiantou9"></span>
            </div> -->
        </div>
        <div class="submitBox">
            <div class="leftbar">
                实付金额<span>&yen;{{payMoney}}</span>
            </div>
            <div class="rightbar">
                提交订单
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {reactive, ref, watchEffect , toRefs, computed} from 'vue'
import {useRoute , useRouter} from 'vue-router'
import {useStore} from 'vuex'
const store = useStore()
const route = useRoute()
const router = useRouter()
const shopId = ref(route.params.id as any)
const total = ref(0.0)
const state = reactive({
    cartList:{} as Record<string,any>
})
// console.log(store);
const shopName = ref("")
const initData = () =>{
    const cartList = store.state.cartList[shopId.value]
    shopName.value = cartList.shopName
    state.cartList = cartList.productList
}
//总价格
const  payMoney = computed(()=>{
    let allMoney=0
    for(const key in state.cartList){
        console.log(key);
        const p = state.cartList[key]
        allMoney+=p.price*100*p.count/100
    }
    return allMoney.toFixed(2)
})

watchEffect(()=>{
    initData()
})
const handleBack = () =>{
    router.back()
}
const {cartList} = toRefs(state)
</script>

<style scoped lang="scss">
.confirm{
    box-sizing: border-box;
    background-color: #f8f8f8;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: scroll;
    .top{
        padding:0 .18rem;
        height: 1.25rem;
        background-image: linear-gradient(0deg, rgba(0,145,255,0.00) 4%, #0091FF 50%);
        margin-bottom: .52rem;
        .topbar{
            position: relative;
            height: .22rem;
            font-size: .16rem;
            color: #FFFFFF;
            padding:.22rem 0;
            .back{
                position: absolute;
                left: 0;
                font-size: .2rem;
            }
            .toptitle{
                width: 100%;
                text-align: center;
                line-height: .22rem;
            }
        }
        .addressBox{
            // margin: 0 .18rem;
            background-color: #fff;
            font-size: .16rem;
            color: #333333;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: .04rem;
            padding: .16rem;
            .dayu{
                color: #666;
                font-size: .2rem;
            }
            .address{
                .a1{
                    margin-bottom: .14rem;
                }
                .a2{
                    font-size: .14rem;
                    margin-bottom: .06rem;
                }
                .a3{
                    font-size: .12rem;
                    color: #666;
                }
            }
        }
    }
    .cartList{
        padding: .16rem;
        margin: 0 0.16rem .16rem 0.16rem;
        background-color: #fff;
        .shopName{
            font-size: .16rem;
            color: #333333;
            margin-bottom: .16rem;
        }
        .cartfa{
            position: absolute;
            left: .16rem;
            right: .16rem;
            top: 2.25rem;
            bottom: .7rem;
            overflow-y: scroll;
        }
        .cart_itemfa{
           background-color: #fff;
        .cart_item{
            display: flex;
            padding: 0 .16rem;
            .leftbar{
                margin-right:.16rem;
                margin-bottom: .16rem;
                .imgbox{
                    width: .46rem;
                    height: .46rem;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .rightbar{
                flex: 1;
                .title{
                    font-size: .14rem;
                    color: #333333;
                    margin-bottom: .06rem;
                    font-weight: bold;
                }
                .bottom{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .b_left{
                        font-size: .1rem;
                        color: #E93B3B;
                    }
                    .b_right{
                        font-size: 10px;
                        color: #000000;
                    }
                }
            }
        }
    }
        .total{
            background: #F5F5F5;
            font-size: 14px;
            color: #999999;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: .04rem 0;
            .tt{
                margin-right: .08rem;
            }
        }
    }
    .submitBox{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: .5rem;
        background: #FFFFFF;
        .leftbar{
            margin-left: .24rem;
            font-size: 14px;
            color: #333333;
            span{
                font-weight: bold;
                margin-left: .02rem;
            }
        }
        .rightbar{
            width: .98rem;
            background: #4FB0F9;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color:#fff;
        }
    }
}
</style>